<template>
    <div class="ticket">
        <div class="navbar">
            <div class="icon"
                 @click="back">
                <svg t="1595312791501"
                     class="icon"
                     viewBox="0 0 1024 1024"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="6570"
                     width="200"
                     height="200">
                    <path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z"
                          fill="#1296db"
                          p-id="6571"></path>
                </svg>
            </div>
            <div class="user">
                <div class="sculpture">
                    <svg t="1595312874974"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
                         p-id="6786"
                         width="200"
                         height="200">
                        <path d="M512 448c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64m0-192c-70.592 0-128 57.408-128 128s57.408 128 128 128 128-57.408 128-128-57.408-128-128-128"
                              fill="#1296db"
                              p-id="6787"></path>
                        <path d="M768 797.632v-69.92a151.904 151.904 0 0 0-151.712-151.68h-208.576A151.904 151.904 0 0 0 256 727.68v69.92C177.632 727.36 128 625.6 128 512 128 299.904 299.936 128 512 128s384 171.904 384 384c0 113.6-49.632 215.36-128 285.632m-448 46.56v-116.48a87.776 87.776 0 0 1 87.712-87.68h208.576A87.776 87.776 0 0 1 704 727.68v116.48a381.568 381.568 0 0 1-384 0m192-780.16C264.96 64 64 264.96 64 512c0 246.976 200.96 448 448 448s448-201.024 448-448c0-247.04-200.96-448-448-448"
                              fill="#1296db"
                              p-id="6788"></path>
                    </svg>
                </div>
                <div class="username">
                    hi,{{username}}
                </div>
            </div>
        </div>

        <!-- search ticket -->
        <div class="ticket-list">
            <div class="search-movie">
                <p>试试搜索影片</p>
                <div>
                    <svg t="1595315385551"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
                         p-id="7003"
                         width="200"
                         height="200">
                        <path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                              fill="#181818"
                              p-id="7004"></path>
                    </svg>
                    <div>

                    </div>
                </div>
            </div>
            <div class="choose-cinema">
                <p>万达影城</p>
                <div>
                    <svg t="1595315385551"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
                         p-id="7003"
                         width="200"
                         height="200">
                        <path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                              fill="#181818"
                              p-id="7004"></path>
                    </svg>
                    <div class="region">
                        <svg t="1595315569735"
                             class="icon"
                             viewBox="0 0 1024 1024"
                             version="1.1"
                             xmlns="http://www.w3.org/2000/svg"
                             p-id="7135"
                             width="200"
                             height="200">
                            <path d="M192 960h640v-64H192z"
                                  fill="#1296db"
                                  p-id="7136"></path>
                            <path d="M512 128a256 256 0 0 1 256 256 254.72 254.72 0 0 1-68.352 173.728l-13.92 13.92-128.832 128.832L512 745.376l-44.896-44.896-128.832-128.832-13.92-13.92A254.72 254.72 0 0 1 256 384a256 256 0 0 1 256-256M281.216 605.088l9.696 9.696 198.112 198.112a31.808 31.808 0 0 0 22.976 9.888c9.056 0 17.152-3.84 22.976-9.888l198.112-198.112 9.696-9.696c15.744-16.416 29.632-34.56 41.632-54.048A317.536 317.536 0 0 0 832 384c0-176.448-143.552-320-320-320S192 207.552 192 384c0 61.248 17.6 118.336 47.584 167.04 12 19.488 25.888 37.632 41.632 54.048"
                                  fill="#1296db"
                                  p-id="7137"></path>
                            <path d="M512 320a64 64 0 1 1-0.032 128.032A64 64 0 0 1 512 320m0 192c70.592 0 128-57.408 128-128s-57.408-128-128-128-128 57.408-128 128 57.408 128 128 128"
                                  fill="#1296db"
                                  p-id="7138"></path>
                        </svg>
                    </div>
                </div>

            </div>
            <div class="movie-session">
                <p>5月9日 <span>1:34pm</span> </p>
                <div>
                    <svg t="1595315385551"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
                         p-id="7003"
                         width="200"
                         height="200">
                        <path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                              fill="#181818"
                              p-id="7004"></path>
                    </svg>
                    <div>
                        更多
                    </div>
                </div>

            </div>
            <div class="ticket-type">
                <div class="discount">
                    <input type="checkbox"
                           name="特惠票"
                           id="discount">
                    <label for="discount">特惠票</label>
                </div>
                <div class="recommend">
                    <input type="checkbox"
                           name="推荐座位"
                           id="recommend">
                    <label for="recommend">推荐座位</label>
                </div>
            </div>
            <div class="buy-ticket">
                <p class="ticket-submit">购票</p>
            </div>
            <div class="cookie">
                <span>一条狗的使命</span>
                <span>我是药神</span>
                <div @click="remove">清除历史 </div>
            </div>
        </div>
        <!-- 特惠票 -->
        <div class="movie-list">
            <div class="movie-list-title">
                <p>特惠票 </p> <span>更多优惠></span>
            </div>
            <div class="movie-item"
                 v-for="item in 5"
                 :key="item">
                <div class="time">
                    <h2>15:30</h2>
                    <p>17:14散场</p>
                </div>
                <div class="movie-hall">
                    <p>复仇者联盟</p>
                    <p>万达影城6号激光厅</p>
                </div>
                <div class="price">
                    30.9元
                </div>
                <router-link to="/cinema/pickseat"
                             tag="div"
                             class="item-ticket">
                    购票
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
			username: '十元'
		}
	},
	computed: {},
	created() {
		console.log(this.$route.index)
	},
	mounted() {},
	methods: {
		back() {
			this.$router.back()
		},
		remove(){
			
		}
	}
}
</script>

<style scoped lang="scss">
.ticket {
	background-color: #22262d;
	height: 100vh;
	// width: 670px;
	margin: 0 auto;
	overflow: scroll;
	.navbar {
		margin: 0 40px;
		padding-top: 20px;
		height: 66px;
		display: flex;
		justify-content: space-between;
		.icon {
			height: 55px;
			width: 44px;
		}
		.user {
			display: flex;
			justify-content: space-between;
			justify-items: center;
			height: 44px;
			// width: px;
			.username {
				width: 79px;
				margin-left: 30px;
				height: 44px;
				line-height: 55px;
				color: #ffffff;
			}
		}
	}
	.ticket-list {
		// height: 670px;
		width: 670px;
		background-color: #33363d;
		margin: 66px auto 0;
		border-radius: 12px;
		padding-top: 40px;
		div {
			margin-left: 34px;
			display: flex;
			// justify-content: flex-start;
			flex-flow: row nowrap;
			width: 604px;
			height: 90px;
			p {
				width: 458px;
				opacity: 0.6;
				font-size: 24px;
				color: #ffffff;
			}
			div {
				width: 160px;
				height: 45px;
				text-align: left;
				svg {
					height: 45px;
					width: 45px;
					color: #ffffff;
				}
				div {
					width: 96px;
					font-size: 24px;
					color: #ffffff;
				}
			}
		}
		.choose-cinema p {
			font-size: 32px;
		}
		.movie-session p {
			font-size: 32px;
			color: #ffffff;
		}
		.ticket-type {
			display: flex;

			.discount {
				width: 160px;
				margin-left: 0px;
			}
			input {
				opacity: 0.75;
				height: 36px;
				width: 36px;
				font-size: 24px;
				color: #ffffff;
			}
			label {
				text-align: center;
				line-height: 36px;
				height: 36px;
				opacity: 0.75;
				margin-top: 6px;
				font-size: 24px;
				vertical-align: bottom;
				color: #ffffff;
			}
			.recommend {
				margin-left: 280px;
			}
		}
		.cookie {
            margin-top: 40px;
			span,div{
                margin-left: 20px;
                opacity: 0.6;
			font-family: PingFangSC-Regular;
			font-size: 24px;
			color: #ffffff;
            }
		}
	}
	.buy-ticket {
		width: 604px;
		height: 80px;
		background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
		box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
		border-radius: 12px;
		border-radius: 12px;
		margin: 0 auto;
		color: #ffffff;
		line-height: 80px;
		p.ticket-submit {
			margin-left: 70px;
			text-align: center;
			font-size: 36px;
		}
	}
	.movie-list {
		width: 670px;
		margin: 0 auto;
		padding-top: 144px;
		.movie-list-title {
			display: flex;
			justify-content: space-between;
			p {
				font-size: 32px;
				color: #ffffff;
			}
			span {
				opacity: 0.7;
				font-size: 24px;
				color: #ffffff;
			}
		}
		.movie-item {
			width: 670px;
			height: 182px;
			margin-top: 22px;
			background-color: #33363d;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #ffffff;
			.time {
				h2 {
					font-size: 36px;
					color: #ffffff;
				}
				p {
					opacity: 0.6;
					font-size: 24px;
					color: #ffffff;
				}
			}
			.movie-hall {
				width: 135px;
				font-size: 24px;
				color: #ffffff;
				p {
					&:nth-child(2) {
						opacity: 0.6;
					}
				}
			}
			.price {
				font-size: 36px;
				color: #fbc34a;
			}
			.item-ticket {
				height: 50px;
				width: 90px;
				text-align: center;
				line-height: 50px;
				background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
				box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
				border-radius: 12px;
				border-radius: 12px;
			}
		}
	}
}
</style>
